{extend name="public/pure"}

{block name="style"}
<title>购物车（{$list}）</title>
<link rel="stylesheet" href="/static/framework7/framework7.ios.colors.css">
<link rel="stylesheet" href="/static/framework7/framework7.ios.css">
<link rel="stylesheet" href="/home/css/commodity/footer.css">
<link rel="stylesheet" href="/home/css/cart/index.css">
<link rel="stylesheet" href="/home/css/common/tip.css">

{/block}

{block name="body"}

<div class="scroll">
    <div class="list-t-wrap">
        <div class="list-wrapper">
            <!--列表一定要放到容器内,因为会有一个div append到mui-scroll中,需要在底部才能起作用-->
            <div class="list-block" id="list-block-company">
                {if condition="empty($data)"}
                <div class="noCar">
                    <img src="/home/images/commodity/noCar.png" alt="无消息">
                </div>
                {else /}
                <ul class="views">
                    {volist name="data" id="vo"}
                    <li class="swipeout">
                        <div class="swipeout-content clearfix" onclick="jump('/home/commodity/detail/id/{$vo.cid}.html')">
                            <div class="fl img">
                                <i></i>
                                <img src="/home/images/commodity/block.png" alt="" data-original="{$vo.front_cover}"  class="lazy">
                            </div>
                            <div class="fr content">
                                <div class="content1">
                                    <div class="titleEdit clearfix">
                                        <div class="title fl">{$vo['title']}</div>
                                        <div class="edit fr" onclick="edit(this,event)"><img src="/home/images/commodity/editor.png" alt=""></div>
                                    </div>
                                    <div class="num">库存：{$vo['stock']}件</div>
                                    <div class="note clearfix" date-price="{$vo.price}">
                                        <span class="fl price">￥<span>{$vo['price1']}</span>.<span class="span">{$vo['price2']}</span></span>
                                        <span class="fr">×<i>{$vo.num}</i></span>
                                    </div>
                                </div>
                                <div class="content2 clearfix">
                                    <div class="purNext fl">
                                        {if condition="($vo['stock'] == 0)"}
                                        <span class="minus active"  onclick="mp1(event)">-</span>
                                        {else /}
                                        {if condition="($vo['num'] == 1)"}
                                        <span class="minus active" onclick="mp1(event)">-</span>
                                        {else /}
                                        <span class="minus" onclick="minus(this,{$vo.id},event)">-</span>
                                        {/if}
                                        {/if}
                                        <input type="number" value="{$vo.num}" name="points" min="1" max="{$vo['stock']}" >
                                        {if condition="($vo['stock'] == 0)"}
                                        <span class="plus active"  onclick="mp1(event)">+</span>
                                        {else /}
                                        {if condition="($vo['num'] ==$vo['stock'])"}
                                        <span class="plus active" onclick="mp1(event)">+</span>
                                        {else /}
                                        <span class="plus" onclick="plus(this,{$vo.id},event)">+</span>
                                        {/if}
                                        {/if}

                                        {if condition="($vo['stock'] == 0)"}
                                        <p>该商品已买完！</p>
                                        {else /}
                                        <p></p>
                                        {/if}
                                    </div>
                                    <div class="fr over" onclick="over(this,event)">
                                        <span>完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swipeout-actions-right">
                            <a class="red" onclick='dispose(this,{$vo.id})'>删除</a>
                        </div>
                    </li>
                    {/volist}


                </ul>
                {/if}

            </div>
            <!--加载更多-->
            <div class="tip"></div>
            <div class="loading hidden">
                <div class="typing_loader"></div>
            </div>
        </div>
    </div>
</div>

<!-- 结算-->
<div class="balance clearfix">
    <div class="fl quanxuan" onclick="quanxuan(this,event)">
        <i></i>
        全选
    </div>
    <div class="fr">
        <span class="total">合计：</span>
        <span class="price">￥<span>0</span>.<span>00</span></span>
        <span class="btn">结算(<i>0</i>)</span>
    </div>
</div>

<div class="footer">
    <ul class="clearfix">
        <li class="fl">
            <a href="/home/commodity/index.html">
                <div class="img"><img src="/home/images/commodity/home.png" alt=""></div>
                <div class="name">首页</div>
            </a>
        </li>
        <li class="fl">
            <a href="/home/order/index.html">
                <div class="img"><img src="/home/images/commodity/address.png" alt=""></div>
                <div class="name">订单</div>
            </a>
        </li>
        <li class="fl">
            <a href="/home/cart/index.html">
                <div class="img"><img src="/home/images/commodity/shopping_1.png" alt=""></div>
                <div class="name">购物车</div>
            </a>
        </li>
        <li class="fl">
            <a href="/home/address/index.html">
                <div class="img"><img src="/home/images/commodity/car.png" alt=""></div>
                <div class="name">地址</div>
            </a>
        </li>
    </ul>
</div>
{/block}

{block name="script"}
<script src="/static/framework7/framework7.js"></script>
<script src="/home/js/reset.js"></script>
<script>

    var myApp=new Framework7;
    var $$=Dom7;

    // 全选
    function quanxuan(this_,e) {
        e.stopPropagation();
        $(this_).toggleClass("active");
        if ($(this_).hasClass("active")) {
            $(".views li .img").addClass("active");
        }else {
            $(".views li .img").removeClass("active");
        }
        total();
    }

    function total() {
        var total = 0;
        var k = 0;
        for (var i = 0; i < $(".views li").length; i++) {
            if ($(".views li").eq(i).find(".img").hasClass("active")) {
                k++;
                total += parseFloat($(".views li").eq(i).find(".note")[0].attributes[1].nodeValue) * parseFloat($(".views li").eq(i).find(".content1 i").html());
            }
        }
        if (isInteger(total) === true) {
            total = total + ".00"
        }else if (isInteger(total*10) === true) {
            total = total + "0"
        }
        var total1 = total.split(".")[0];
        var total2 = total.split(".")[1];
        $(".balance .price span").eq(0).html(total1);
        $(".balance .price span").eq(1).html(total2);
        $(".balance .btn i").html(k);
    }

    // 判断是否为整数
    function isInteger(obj) {
        return typeof obj === 'number' && obj%1 === 0
    }

    // 选中
    $(".views li .img i").on("click", function (event) {
        event.stopPropagation();
        $(this).parent(".img").toggleClass("active");
        total();
    });

    // 编辑
    function edit(this_,event) {
        event.stopPropagation();
        $(this_).parents(".content1").hide();
        $(this_).parents(".content1").siblings(".content2").show();
        return false;
    }

    // 减法
    function minus(this_,id,event) {
        event.stopPropagation();
        $(this_).siblings(".plus").removeAttr("onclick");
        $(this_).siblings(".plus").attr("onclick","plus(this," + id + ",event)");
        $(this_).siblings("p").html("");
        var val = $(this_).next("input").val();
        $(this_).siblings("span").removeClass("active");
        val--;
        $.ajax({
            type: "post",
            url:"{:Url('Cart/reduce')}",
            data: {
                id: id
            },
            success: function (data) {
                if (val == 1) {
                    $(this_).removeAttr("onclick");
                    $(this_).attr("onclick","mp1(event)");
                    $(this_).addClass("active");
                    $(this_).siblings("p").html("至少选择一件！");
                }else {
                    $(this_).removeClass("active");
                }
                $(this_).next("input").val(val);
            }
        });
    }

    // 加法
    function plus(this_,id,event) {
        event.stopPropagation();
        $(this_).siblings(".minus").removeAttr("onclick");
        $(this_).siblings(".minus").attr("onclick","minus(this," + id + ",event)");
        $(this_).siblings("p").html("");
        var val = $(this_).prev("input").val();
        $(this_).siblings("span").removeClass("active");
        val++;
        $.ajax({
            type: "post",
            url:"{:Url('Cart/plus')}",
            data: {
                id: id
            },
            success: function (data) {
                if (val == data.data.stock) {
                    $(this_).removeAttr("onclick");
                    $(this_).attr("onclick","mp1(event)");
                    val = data.data.stock;
                    $(this_).addClass("active");
                    $(this_).siblings("p").html("该商品最多可以选择"+ data.data.stock +"个！");
                }else {
                    $(this_).siblings("p").html("");
                    $(this_).removeClass("active");
                }
                $(this_).prev("input").val(val);
            }
        });

    }

    // 禁止冒泡
    function mp1(event) {
        event.stopPropagation()

    }

    // 完成
    function over(this_,event) {
        event.stopPropagation();
        var val = $(this_).siblings(".purNext").find("input").val();
        $(this_).parents(".content2").hide();
        $(this_).parents(".content2").siblings(".content1").show();
        $(this_).parents(".content2").siblings(".content1").find("i").html(val);
        return false;
    }


    $(function(){
        check();
    });

    // 没有消息显示无消息提醒
    function check(){
        if($("ul").find("li").length == 0){
            $('.noCar').show();
        }else if ($("ul").find("li").length == 12) {
            $('.tip' ).text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);
        }
    }

    // 跳转商品详情
    function jump(url){
        parent.location.href= url;
    }
    // 删除操作
    function dispose(i,id){
        swal({
            title: ' ',
            text: '确定删除吗？',
            type: 'warning',
            confirmButtonText:'确定',
            showCancelButton:true,
            cancelButtonText:'取消'
        },function(isConfirm){
            //确认之后执行函数
            if (isConfirm) {
                $.ajax({
                    type: "post",
                    url:"{:Url('Cart/del')}",
                    data: {
                        id:id
                    },
                    success: function(data){
                        //成功后刷新页面
                        if(data.code == 1){
                            setTimeout(function(){
                                swal({
                                    title: ' ',
                                    text: '操作成功!',
                                    type: 'success',
                                    confirmButtonText:'确定',
                                    timer: 1500
                                });
                                setTimeout(function () {
                                    //未审核页面有操作,审核页面用来判断刷新
                                    sessionStorage.setItem("review","true");
                                    $(i).parent().parent().fadeOut(500);
                                    $(i).parent().parent().remove();
                                    //判断是否还有消息
                                    check();
                                },1500)
                            },200);
                        }else{
                            setTimeout(function(){
                                swal({
                                    title: ' ',
                                    text: '操作失败!',
                                    type: 'error',
                                    confirmButtonText:'确定',
                                    timer: 1500
                                })
                            },200);
                        }
                    }
                })
            }
        });
    }

    function aleats(msg,status){
        swal({
                    title: ' ',
                    text: msg,
                    type: status,
                    confirmButtonText:'确定',
                    showConfirmButton:false
                },function () {},
                function (dismiss) {
                    if (dismiss === 'timer') {
                        history.go(0);
                    }
                })
    }

    var scrollNow = true;
    function loadScroll(){
        var len = $('.views li').length;
        var tip = $(".tip");
        var loading = $('.loading');
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight + 104 >= el.scrollHeight && scrollNow){
            scrollNow = false;
            $.ajax({
                type:"post",
                url: "{:Url('Cart/listmore')}",
                data:{
                    length:len
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success:function(data){
                    loading.toggleClass('hidden');
                    tip.show();
                    if(data.code == 1){
                        addLists(data);
                        if(data.data.length == 5){
                            tip.text('上拉加载更多');

                        }else{

                            tip.text('没有更多了');
                            $(window ).off("scroll");
                        }
                        if ($(".balance .quanxuan").hasClass("active")) {
                            $(".views li .img").addClass("active");
                        }else {
                            $(".views li .img").removeClass("active");
                        }
                        total();
                    } else {

                        tip.text('没有更多了');
                        $(window ).off("scroll");
                    }
                    lazy();
                    scrollNow = true;
                }
            })
        }
    }

    function addLists(data){
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            html +='<li class="swipeout">'
                    +'<div class="swipeout-content clearfix" onclick="jump('+"'"+'/home/commodity/detail/id/'+ list.id +'.html'+ "'" +')">'
                    +'<div class="fl img">'
                    +'<i></i>'
                    +'<img src="/home/images/commodity/block.png" alt="" data-original="'+ list.src +'" class="lazy">'
                    +'</div>'
                    +'<div class="fr content">'
                    +'<div class="content1">'
                    +'<div class="titleEdit clearfix">'
                    +'<div class="title fl">'+ list.title +'</div>'
                    +'<div class="edit fr" onclick="edit(this,event)"><img src="/home/images/commodity/editor.png" alt=""></div>'
                    +'</div>'
                    +'<div class="num">库存：'+ list.stock +'件</div>'
                    +'<div class="note clearfix" date-price="'+ list.price +'">'
                    +'<span class="fl price">￥<span>'+ list.price1 +'</span>.<span class="span">'+ list.price2 +'</span></span>'
                    +'<span class="fr">×<i>'+ list.num +'</i></span>'
                    +'</div>'
                    +'</div>'
                    +'<div class="content2 clearfix">'
                    +'<div class="purNext fl">';
            if (list.stock == 0 || list.num == 1) {
                html += '<span class="minus active" onclick="mp1(event)" >-</span>'
            }else {
                html += '<span class="minus" onclick="minus(this,'+ list.id +',event)">-</span>'
            }
            html += '<input type="number" value="'+ list.num +'" name="points" min="1" max="'+ list.stock +'" >';
            if (list.stock == 0 || list.num == 1) {
                html += '<span class="plus active" onclick="mp1(event)" >+</span>'
            }else {
                html += '<span class="plus" onclick="plus(this,'+ list.id +',event)">+</span>'
            }
            if (list.stock == 0) {
                html += '<p>该商品已买完！</p>';
            }else {
                html += '<p></p>';
            }
             html +='</div>'
                    +'<div class="fr over" onclick="over(this,event)">'
                    +'<span>完成</span>'
                    +'</div>'
                    +'</div>'
                    +'</div>'
                    +'</div>'
                    +'<div class="swipeout-actions-right">'
                    +'<a class="red" onclick="dispose(this,'+ list.id +')">删除</a>'
                    +'</div>'
                    +'</li>';
        }
        $('#list-block-company ul').append(html);
    }

    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    };

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });

    // 图片懒加载
    function lazy() {
        $("img.lazy").lazyload({
            placeholder: "/home/images/commodity/loading.jpg",
            effect: "fadeIn",
            threshold: 1
        });
    }
    lazy();

</script>
{/block}